<template>
	<view :style="{ height: height + 'px' }">
		<view class="head" :style="{ height: height + 'px', background: background }"
			style="background-size: 100% 100%">
			<view v-if="backShow" class="back" :style="{ top: top + 'px', color: color }" @click="back">
				<image class="image-back" src="../../static/images/home/icon_back.png" mode="scaleToFill" />
			</view>

			<view v-if="titleShow" class="title" :style="{ top: top + 'px', color: color, 'font-size': size + 'rpx' }">
				{{ title }}
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		props: {
			title: {
				type: String,
				default: '自定义标题',
			},
			size: {
				type: Number,
				default: 32,
			},
			color: {
				type: String,
				default: '#fff',
			},
			titleShow: {
				type: Boolean,
				default: true,
			},
			backShow: {
				type: Boolean,
				default: true,
			},
			background: {
				type: String,
				// default: 'url(https://cdn.jsdelivr.net/gh/heroqyc/blogImg/pageImg/20230203164651.png)',
				default:
					// eslint-disable-next-line max-len
					'url()',
			},
		},
		data() {
			return {
				height: 0,
				top: 0,
			};
		},
		created() {
			//设备信息
			let app : any = uni.getSystemInfoSync();
			// #ifdef APP-PLUS
			this.top = app.safeArea.top;
			this.height = 64 + (app.safeAreaInsets.bottom === 0 ? 15 : app.safeAreaInsets.bottom);
			//#endif

			// #ifdef MP-WEIXIN
			//胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.height = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2;
			this.top = menuButtonInfo.top;
			//#endif
		},
		methods: {
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.head {
		position: fixed;
		width: 750rpx;
		z-index: 999;
	}

	.title {
		position: fixed;
		width: 750rpx;
		text-align: center;
		line-height: 32px;
		height: 32px;
	}

	.back {
		position: fixed;
		width: 81rpx;
		text-align: center;
		line-height: 32px;
		height: 32px;
		font-size: 32rpx;
		font-weight: 900;
		z-index: 9;

		.image-back {
			width: 16rpx;
			height: 28rpx;
		}
	}
</style>